<template>
  <div id="homeBox">
    <el-container>
      <el-header>
        <el-row :gutter="20" style="display: flex; width: 100%; z-index: 2">
          <el-col :span="8" style="display: flex">
            <!-- <div class="grid-content bg-purple" style="display: flex;align-items: center;justify-content: flex-end;">
                <img src="../assets/logo_copy.png" style="width:100%;height:auto;">
            </div> -->
            <div
              class="grid-content bg-purple logo"
              style="
                font-size: 25px;
                color: #409eff;
                font-weight: 900;
                display: flex;
                justify-content: left;
              "
            >
              地标产品电子围栏系统
            </div>
          </el-col>
          <el-col :span="4">
            <!-- <div class="grid-content bg-purple logo" style="font-size:25px">
               WN综合管理系统
            </div> -->
          </el-col>
          <el-col
            :span="12"
            style="display: flex; justify-content: flex-end; align-items: center"
          >
            <div class="grid-content bg-purple">
              <el-row :gutter="20" style="display: flex; justify-content: flex-end">
                <el-col :span="20" style="display: flex; justify-content: flex-end">
                  <div class="grid-content bg-purple register">
                    <el-button type="text" @click="registerVisible = true"
                      >注册</el-button
                    >
                    <el-button type="text" @click="centerDialogVisible = true"
                      >登录</el-button
                    >
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="padding: 0px">
        <div id="map" style="width: 100%; height: 100%"></div>
      </el-main>
    </el-container>

    <!-- //登录弹框 -->
    <el-dialog
      title="登录"
      :visible.sync="centerDialogVisible"
      @closed="closedDialog"
      width="30%"
      center
      :show-close="false"
    >
      <el-form :model="loginParam" :rules="rules" ref="loginParam">
        <el-form-item prop="name">
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginParam.name"
            autocomplete="off"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="loginParam.password"
            autocomplete="off"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-button type="text" @click="forgetDialogVisible = true">忘记密码？</el-button>
        <el-button type="text" @click="registerVisible = true">马上注册</el-button>
        <el-form-item>
          <el-button type="primary" v-on:click="login" style="width: 100%"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- //注册弹框 -->
    <el-dialog
      title="注册"
      :visible.sync="registerVisible"
      width="30%"
      center
      :show-close="false"
    >
      <el-form>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-user"
            v-model="signUpUserObj.name"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-lock"
            v-model="signUpUserObj.password"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-lock"
            v-model="signUpUserObj.newpassword"
            placeholder="确定密码"
            show-password
          ></el-input>
        </el-form-item>
        <!-- <el-form-item> -->
        <el-checkbox v-model="signUpUserObj.checked"
          >我已完整阅读并接受《<span style="color: 6cb7e9">用户服务协议</span
          >》各项条款</el-checkbox
        >
        <!-- </el-form-item> -->
        <el-form-item>
          <el-button type="primary" v-on:click="register" style="width: 100%"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- //重置密码弹框 -->
    <el-dialog
      title="重置密码"
      :visible.sync="forgetDialogVisible"
      width="30%"
      center
      :show-close="false"
    >
      <el-form>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-user"
            v-model="pwdAndUserObj.name"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-lock"
            v-model="pwdAndUserObj.password"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            prefix-icon="el-icon-lock"
            v-model="password"
            placeholder="确定密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="resetPass" style="width: 100%"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
// import MapboxLanguage  from '@mapbox/mapbox-gl-language'
import mapboxgl from "mapbox-gl";
import qs from "qs";
export default {
  name: "LoginView",
  data() {
    return {
      map: {},
      viewer: {},
      inter: null,
      labelPosition: "right",
      pwdAndUserObj: {
        userName: "",
        password: "",
        newpassword: "",
      },
      signUpUserObj: {
        name: "",
        password: "",
        newpassword: "",
        checked: "",
      },
      loginParam: {
        name: "",
        password: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      name: "",
      password: "",
      checked: true,
      centerDialogVisible: false,
      registerVisible: false,
      forgetDialogVisible: false,
      activeIndex: "1",
      activeIndex2: "1",
      srcs: [
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
      ],
    };
  },
  mounted() {
    /**
     *初始化cesium
     */
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new mapboxgl.Map({
        accessToken:
          "pk.eyJ1Ijoienh0d24iLCJhIjoiY2wzanV3bHduMTZwejNrcXcyd3B1bzBieiJ9.aW_TDqLomftwPvBu7OWqwQ",
        container: "map",
        style: "mapbox://styles/mapbox/outdoors-v10", // stylesheet location
        center: [116.79507, 32.65542],
        zoom: 1.5, // starting zoom
        hash: false,
        //pitch: 45,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
        bearing: 0, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
        antialias: true, //抗锯齿，通过false关闭提升性能
        projection: "globe",
      });
      //地图导航
      // var nav = new mapboxgl.NavigationControl();
      // this.map.addControl(nav, 'top-right');

      // 比例尺
      var scale = new mapboxgl.ScaleControl({
        maxWidth: 100,
        unit: "metric",
      });
      this.map.addControl(scale, "bottom-left");
      // 全图
      // this.map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      // this.map.addControl(
      //   new mapboxgl.GeolocateControl({
      //     positionOptions: {
      //       enableHighAccuracy: true
      //     },
      //     trackUserLocation: true
      //   })
      // );

      let that = this;
      this.map.on("load", () => {
        that.map.setFog({
          color: "rgb(186, 210, 235)",
          "high-color": "rgb(36, 92, 223)",
          "horizon-blend": 0.02,
          "space-color": "rgb(11, 11, 25)",
          "star-intensity": 0.6,
        });
      });
    },

    //登录成功跳转
    login: function () {
      let that = this;
      that.$refs["loginParam"].validate((valid) => {
        if (valid) {
          that
            .$axios({
              url: "http://localhost:9002/user/login",
              method: "post",
              data: qs.stringify({
                userName: that.loginParam.name,
                userPassword: that.loginParam.password,
              }),
            })
            .then(function (response) {
              console.log(response);
              if (response.data.code == 200) {
                that.$notify({
                  title: "成功",
                  message: "这是一条成功的提示消息",
                  type: "success",
                  position: "bottom-right",
                });
                localStorage.setItem("user_name", JSON.stringify(response.data.data));
                that.$router.push({ path: "/index/electroni_ceence_show" });
                window.location.reload();
                that.$refs["loginParam"].resetFields();
              } else {
                that.$message.error("登录失败");
                that.loginParam.name = "";
                that.loginParam.password = "";
              }
            })
            .catch(function (error) {
              console.log(error);
              that.$message.error("登录失败");
              that.loginParam.name = "";
              that.loginParam.password = "";
              // that.$notify({
              //   title: "成功",
              //   message: "以游客身份访问",
              //   type: "success",
              //   position: "bottom-right",
              // });
              // console.log("ff");
              // that.$router.push({ path: "/index/electroni_ceence_show" });
              // window.location.reload();
              // that.$refs["loginParam"].resetFields();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //注册成功直接跳转主页
    register: function () {
      let that = this;
      if (that.signUpUserObj.password != that.signUpUserObj.newpassword) {
        this.$message({
          message: "密码不一致，请重新输入!",
          type: "warning",
        });
        that.signUpUserObj.name = "";
        that.signUpUserObj.password = "";
        that.signUpUserObj.newpassword = "";
        return false;
      }
      that.$axios
        .post(`http://localhost:9002/user/add`, {
          userName: that.signUpUserObj.name,
          userPassword: that.signUpUserObj.password,
          checked: that.signUpUserObj.checked ? "1" : "0",
        })
        .then(function (res) {
          console.log(res);
          that.registerVisible = !that.registerVisible;
          that.signUpUserObj.name = "";
          that.signUpUserObj.password = "";
          that.signUpUserObj.newpassword = "";
          that.$message({
            type: "success",
            message: "注册成功",
          });
        })
        .catch(function (error) {
          console.log(error);
          that.registerVisible = !that.registerVisible;
          that.signUpUserObj.user = "";
          that.signUpUserObj.password = "";
          that.signUpUserObj.newpassword = "";
          that.$message({
            type: "info",
            message: "注册失败",
          });
        });
      // this.$router.push({ path: "/index/electroni_ceence_show" });
      // window.location.reload();
    },
    //forget password
    resetPass: function () {
      let that = this;
      if (that.pwdAndUserObj.password != that.pwdAndUserObj.newpassword) {
        this.$message({
          message: "密码不一致，请重新输入!",
          type: "warning",
        });
        that.pwdAndUserObj.password = "";
        that.pwdAndUserObj.newpassword = "";
        return false;
      }
      that
        .$axios({
          url: "http://localhost:9002/user/editPwd",
          method: "post",
          data: qs.stringify({
            userName: that.pwdAndUserObj.userName,
            userPassword: that.pwdAndUserObj.password,
          }),
        })
        .then(function (response) {
          console.log(response);
          that.forgetDialogVisible = !that.forgetDialogVisible;
          that.centerDialogVisible = false;
          that.user = response.data.data;
          that.$message({
            type: "success",
            message: "修改成功",
          });
        })
        .catch(function (error) {
          that.pwdAndUserObj.password = "";
          that.pwdAndUserObj.newpassword = "";
          console.log(error);
          that.$message.error("修改失败");
        });
    },
    //关闭弹框回调
    closedDialog: function () {
      this.$refs["loginParam"].resetFields();
    },
  },
};
</script>
<style scoped leng="scss">
/* @import 'mapbox-gl/dist/mapbox-gl.css'; */
@import "https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.css";
html,
body,
#homeBox,
#app {
  height: 100%;
  overflow: hidden;
}
#homeBox {
  /* border:1px solid red; */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #D3DCE6; */
}
.el-container {
  height: 100%;
  /* border: 1px solid #B3C0D1; */
}
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
}
.el-footer {
  background-color: #fff;
  color: #333;
  display: flex;
  align-items: center;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  padding: 0px;
  overflow: hidden;
}
.logo {
  display: flex;
  justify-content: flex-end;
}
.el-menu-top {
  display: flex;
  justify-content: flex-end;
}
.register {
  display: flex;
  justify-content: flex-end;
}

.el-carousel {
  height: 100%;
}
.el-carousel__container {
  position: relative;
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-input {
  width: 100%;
}
.el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #dcdfe6;
  border-image: linear-gradient(
      244deg,
      rgba(255, 255, 255, 0) 0%,
      #409eff 50%,
      rgba(255, 255, 255, 0) 100%
    )
    1 10;
}
#cesiumContainer {
  height: 100%;
}
</style>
